<template>
  <div id="home">
    <div>
      <topology 
      @event="onEvent" 
      :data="data" 
      :configs="topologyConfigs"
      :materials="materials"     
      >
      </topology> 

    </div>

    <div>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        >
        <div>
          <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
            <el-form-item label="名称">
              <el-input v-model="formLabelAlign.name"></el-input>
            </el-form-item>
            <el-form-item label="活动区域">
              <el-input v-model="formLabelAlign.region"></el-input>
            </el-form-item>
            <el-form-item label="活动形式">
              <el-input v-model="formLabelAlign.type"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogConfirmOrCancel">取 消</el-button>
          <el-button type="primary" @click="dialogConfirmOrCancel">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    
  </div>
</template>

<script >
import data from '@/components/data/le5le.topology.json'
import {
  defalutMenus,
  //defalutUserMenus,
  defalutMaterials,
  images,
  defalutMaterialTabs,
} from "@/components/data/data";
export default {
  name: "App",
  mounted() {
    window.topology.data.socketEvent = true

    topology.on('websocket', (e) => 
    { 
      console.log(e)  
      topology.setValue('f3b7f9e', {
       fillStyle
       : e
      })
    });
    /**
     * 预览功能需要
     * 
     */
    // 请确保 7777777(类似数字).js 和 rg.js已下载，正确加载
    if (window.registerTools) {
      window.registerTools();

      //确保从预览页面返回是时清空存储
        const json = sessionStorage.getItem('topologyData');
        if (!this.$route.query.id && json) {
          this.data = JSON.parse(json);
          setTimeout(() => {
            // 读到后清除对应 session
            sessionStorage.removeItem('topologyData');
          }, 200);
        }
    }


    //双击节点
    window.topology.on("dblclick", (e) => {
      this.dialogVisible = true;
    });

    //鼠标移到节点
    window.topology.on("moveInNode", (e) => {
      console.log(e)
      this.flag = true;
    });

    //鼠标移出节点
    window.topology.on("moveOutNode", (e) => {
      this.flag = false;
    });
   

  },
  data() {
    return {
      flag:false,
      labelPosition: 'right',
      formLabelAlign: {
        name: '',
        region: '',
        type: ''
      },
      dialogVisible: false,
      data: data,
      topologyConfigs: {
        license: {
          key: "xxxxx",
          value: "xxxxxxxxxxxxxxx",
          version: "xxxxxxxxxxxxxxxxx",
        },
        // logo: {
        //   img: '‪C:/Users/wise/Desktop/乐吾乐demo/lewule/src/assets/logo.png',
        //   url: 'http://topology.le5le.com',
        //   target: '_blank'
        // },
        logo: null,
        materialTabs: defalutMaterialTabs,
        menus: defalutMenus,
        //loginUrl: 'https://account.le5le.com',
        //signupUrl: 'https://account.le5le.com',
        //userMenus: defalutUserMenus,

        // dataOptionsFn: (pen, key, value) => {
        //   const keys = ['aaa', 'bbb'];
        //   const values = [
        //     {
        //       value: 111,
        //       label: '111'
        //     },
        //     {
        //       value: 222,
        //       label: '222'
        //     }
        //   ];
        //   return {
        //     keys,
        //     // value: 80,
        //     values
        //   };
        // }
      },
      // user: {
      //   username: 'le5le'
      // },
      materials: {
        system: defalutMaterials,
        // user: [],
        // images,
        // uploadUrl: '/api/file',
        // uploadHeaders: {
        //   Authorization: 'your token'
        // },
        // uploadParams: {
        //   mydata: 1
        // }
      },
    };
  },
  methods: {
    dialogConfirmOrCancel(){
      this.dialogVisible = false
      this.formLabelAlign={
                            name: '',
                            region: '',
                            type: ''
                          }
    },
    onEvent(e) {
      console.log(e)
      switch (e.name) {
        case "openwebsocket":
          topology.openSocket("ws://localhost:8888/websocket/20")
          break;
        case "closewebsocket":
          window.topology.closeSocket()
          break;
        case "clear":
          this.data = {};
          break;
        // case 'left_align':
        //    const pens = window.topology.data.pens
        //   window.Le5leTopology.layout(window.topology.data.pens, {
        //         maxWidth: 530,     // 最大宽度
        //         //  nodeWidth: 0,    // 节点宽度
        //         //  nodeHeight: 0,   // 节点高度
        //         //  maxCount: 5,     // 水平个数
        //         // spaceWidth: 0,   // 水平间距
        //         // spaceHeight: 0 // 垂直间距
        //         })
        //   window.topology.render()
        // break;
        // case 'right_align':
        //   const rects = []
        //   for(var keys in window.topology.data.pens){
        //      rects.push(window.topology.data.pens[keys].rect)
        //   }
        //    // 打印出id最大的值
        //   let b=Math.max.apply(Math,rects.map((item,index)=>{
        //     return item.x;
        //   }))
        //   for(var keys in rects){
        //     if(rects[keys].x==b){
        //       window.Le5leTopology.alignNodes(window.topology.data.pens, rects[keys], 'right')
        //     }
        //   }
        //   window.topology.render()
        // break;
        // case 'top_align':
        //   alert('top_align')
        // break;
        // case 'bottom_align':
        //   alert('bottom_align')
        // break;
        case "animate":
          //方式1
          // window.topology.data.pens[0].initAnimate()
          // window.topology.data.pens[0].startAnimate()

          //方式2
          window.topology.data.pens[0].animateStart = Date.now();
          window.topology.data.pens[1].animateStart = Date.now();
          window.topology.animateLayer.readyPlay('aa');
          window.topology.animateLayer.animate();
          break;
        case "save":
          console.log(window.topology);
          break;
        case "preview":
          // 保存当前编辑数据到sessionStorage
          sessionStorage.setItem(
            "topologyData",
            JSON.stringify(window.topology.pureData())
          );
          this.$router.push({
            path: "/preview",
            query: { id: "xxx", r: "1" },
          });
          break;
      }
    },
    ondrop(event) {
      event.preventDefault();
      const node = JSON.parse(event.dataTransfer.getData("Text"));
      node.rect.x = event.offsetX - ((node.width / 2) << 0);
      node.rect.y = event.offsetY - ((node.height / 2) << 0);
      this.addNode(new Node(node), true);
    },
  },
};
</script>

<style lang="less">
.home {
  height: 100vh;
}
</style>
